// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

// XXX: Use _markdown.scss for anything new. This file is legacy and
// should be removed together with the legacy abstract code!

@use 'base/palette' as *;
@use 'base/animation' as *;
@use 'base/typography' as *;
@use 'partials/boxes' as *;
@use 'partials/icons' as *;
@use 'modules/contributions/display' as *;

$editor-preview-bg-color: $light-gray;

.wmd-input {
  @include font-family-monospace();
  @include transition(height 0.25s ease-out);

  &:focus {
    height: 300px;
  }

  height: 100px;

  width: 100%;
  max-width: 800px;
  padding: 1em;
  font-size: 0.9em;
}

.wmd-panel {
  max-width: 800px;
}

.wmd-button-row {
  max-width: 800px;
  position: relative;
  padding: 0.5em;
  height: 2em;
  margin: 0;
  background-color: $light-gray;
}

.wmd-spacer {
  width: 1px;
  height: 1em;
  margin: 0 1em 0 1em;
  display: inline-block;
  background-color: $dark-gray;
  list-style: none;
}

.wmd-button-bar {
  position: relative;

  .save-button {
    @include transition(opacity);
    @include transition(background-color);
    @include single-box-shadow(0, 0, 1px, 1px, #fff);
    position: absolute;
    right: 50px;
    display: inline-block;
    color: white;
    z-index: 1;
    top: 8px;
    opacity: 0;
    visibility: hidden;

    &.waiting-save {
      visibility: visible;
      opacity: 1;
    }

    &.saving {
      background-color: #e4e4b0;
      visibility: visible;
      opacity: 1;
      color: $dark-gray !important;
    }

    &.saved {
      background-color: #e2f0e2;
      visibility: visible;
      opacity: 0.8;
    }
  }
}

.wmd-button {
  @include transition(color);
  width: 2em;
  height: 2em;
  line-height: 2em;
  display: inline-block;
  color: $black;
  text-align: center;
  cursor: pointer;

  &:hover {
    color: $gray;
  }
}

.wmd-button > span {
  font-family: 'icomoon-ultimate';
  vertical-align: middle;
}

[id^='wmd-bold-button'] span::before {
  @extend %icon-bold;
}

[id^='wmd-italic-button'] span::before {
  @extend %icon-italic;
}

[id^='wmd-link-button'] span::before {
  @extend %icon-link;
}

[id^='wmd-quote-button'] span::before {
  @extend %icon-bubble-quote;
}

[id^='wmd-code-button'] span::before {
  @extend %icon-code;
}

[id^='wmd-image-button'] span::before {
  @extend %icon-image;
}

[id^='wmd-olist-button'] span::before {
  @extend %icon-numbered-list;
}

[id^='wmd-ulist-button'] span::before {
  @extend %icon-list;
}

[id^='wmd-heading-button'] span::before {
  @extend %icon-type;
}

[id^='wmd-hr-button'] span::before {
  @extend %icon-pagebreak;
}

[id^='wmd-undo-button'] span::before {
  @extend %icon-undo;
}

[id^='wmd-redo-button'] span::before {
  @extend %icon-redo;
}

.wmd-prompt-background {
  background-color: black;
}

.wmd-prompt-dialog {
  border: 1px solid #999;
  background-color: #f5f5f5;
}

.wmd-prompt-dialog > div {
  font-size: 0.8em;
  font-family: arial, helvetica, sans-serif;
}

.wmd-prompt-dialog > form > input[type='text'] {
  border: 1px solid #999;
  color: black;
}

.wmd-prompt-dialog > form > input[type='button'] {
  border: 1px solid #888;
  font-family: trebuchet MS, helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
}

.md-preview-wrapper.edit {
  max-width: 800px;
  @include md-preview-wrapper-mixin($editor-preview-bg-color);
}
